<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_536210_yd6l1o8gnawtgldi.css">
	<link rel="stylesheet" href="css/sweetalert.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>
	<script src="js/sweetalert-dev.js" type="text/javascript"></script>
	<title>个人银行卡绑卡页面</title>
	<style>
		body{
			background: #E6E6E6;
		}
	</style>
</head>
<body>
	<header>
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>绑定银行卡</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="container">
		<div class="choosecard">
			<p>请绑定开户人本人的银行卡<span class="icon iconfont icon-xiugai"></span></p>
		</div>
		<div class="cardbox">
			<form class="form-horizontal">
				<div class="form-group">
					<label for="inputPassword" class="col-xs-4 control-label">开户人姓名</label>
					<div class="col-xs-8">
						<input type="text"  placeholder="您的姓名" id="myName">
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword" class="col-xs-4 control-label">银行卡号</label>
					<div class="col-xs-8">
						<input type="text"  placeholder="您的银行卡号" id="myCard">
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword" class="col-xs-4 control-label">所属银行</label>
					<div class="col-xs-8">
						<select name="" class="select-card">
							<option value="1">邮政储蓄银行</option>
							<option value="1">农业储蓄银行</option>
							<option value="1">工商储蓄银行</option>
							<option value="1">成都储蓄银行</option>
							<option value="1">四处储蓄银行</option>
							<option value="1">中国储蓄银行</option>
						</select>
					</div>
				</div>
			</form>
			<div class="card-control">
				<p>牛津堂智能加密，保障你的用卡安全</p>
				<button type="button" class="surebtn">保存</button>
			</div>
		</div>
	</div>
</body>
<script>
	 $("#myCard").keyup(function a (e) {
	     var obj = e;
	     if(obj.keyCode != 8){             //判断是否为Backspace键，若不是执行函数；
	         var b = document.getElementById("myCard").value;        //定义变量input  value值；
	         var maxValue = 23;                                 //限制输入框的最大值；
	         b = b.replace(/[^\d\s]/g,"");               //正则表达式：如果输入框中输入的不是数字或者空格，将不会显示；
	        document.getElementById("myCard").value = b;               //把新得到得value值赋值给输入框；
	        for(n=1;n<=4;n++){                                                
	             if(b.length <=5*n-2||b.length>5*n-1){      //判断是否是该加空格的时候，若不会，还是原来的值；
	                 b = b;
	             }else{
	                 b = b +" ";                                                           //给value添加一个空格；
	                 document.getElementById("myCard").value = b;    //赋值给输入框新的value值；
	             }
	         }        
	      }
	         
	 });


	 $('.surebtn').on('click',function(){
	 	if($('#myName').val() == ''){
	 		sweetAlert("保存失败", "请输入用户名!", "error");
	 	}else if($('#myCard').val() == ''){
	 		sweetAlert("保存失败", "请输入银行卡!", "error");
	 	}else{
	 		sweetAlert("保存成功", "感谢使用!", "success");
	 		$('.icon-xiugai').fadeIn();
	 		$('.surebtn').fadeOut();
	 	}
	 	
	 })

	 $('.icon-xiugai').on('click',function(){
	 	$('.surebtn').fadeIn();
	 	$('.icon-xiugai').fadeOut();
	 });
</script>
</html>